<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		#root button{
			padding:5px;
			margin:5px;
		}
		#root button.active{
			background: red;
		}
		#root div{
			width: 500px;
			height: 300px;
			border:1px solid green;
		}
	</style>
</head>
<body>
	<div id="root">
		<button>中</button>
		<button>日</button>
		<button>韩</button>
		<div>中国新闻</div>
		<div>日本新闻</div>
		<div>韩国新闻</div>
	</div>
</body>
<script>
	// 面向过程1
	// const btns = document.querySelectorAll("#root button");
	// const divs = document.querySelectorAll("#root div");
	// let index = 0;
	// btns.forEach((btn,i)=>{
	// 	btn.onclick = function(){
	// 		if(index===i) return;
	// 		console.log(1)
	// 		btns[index].className = null;
	// 		divs[index].style.display = "none";
	// 		index = i;
	// 		btns[index].className = "active";
	// 		divs[index].style.display = "block";
	// 	}
	// 	btn.className = null;
	// 	divs[i].style.display = "none";
	// })
	// btns[index].className = "active";
	// divs[index].style.display = "block";
	
	
	// 2- 优化
	// const btns = document.querySelectorAll("#root button");
	// const divs = document.querySelectorAll("#root div");
	// let index = 0;
	// init();
	// function init(){
	// 	btns.forEach((btn,i)=>{
	// 		btn.onclick = function(){
	// 			if(index===i) return;
	// 			hide();
	// 			index = i;
	// 			show();
	// 		}
	// 		hide(i);
	// 	})
	// 	show();
	// }
	//
	// function hide(i=index){
	// 	btns[i].className = null;
	// 	divs[i].style.display = "none";
	// }
	// function show(){
	// 	btns[index].className = "active";
	// 	divs[index].style.display = "block";
	// }
	
	// 3- 面向对象
	// 将变量或常量作为对象的实例属性
	// 函数作为对象的原型方法
	// function Tag(){
	// 	this.btns = document.querySelectorAll("#root button");
	// 	this.divs = document.querySelectorAll("#root div");
	// 	this.index = 0;
	// 	this.init();
	// }
	// Tag.prototype.init = function(){
	// 	this.btns.forEach((btn,i)=>{
	// 		btn.onclick = ()=>{
	//
	// 			if(this.index===i) return;
	// 			this.hide();
	// 			this.index = i;
	// 			this.show();
	// 		}
	// 		this.hide(i);
	// 	})
	// 	this.show();
	// }
	//
	// Tag.prototype.hide=function(i=this.index){
	// 	this.btns[i].className = null;
	// 	this.divs[i].style.display = "none";
	// }
	// Tag.prototype.show = function(){
	// 	this.btns[this.index].className = "active";
	// 	this.divs[this.index].style.display = "block";
	// }
	// new Tag();
	
	
	// 4-面向对象优化
	function Tag(){
		this.btns = document.querySelectorAll("#root button");
		this.divs = document.querySelectorAll("#root div");
		this.index = 0;
		this.init();
	}
	Object.assign(Tag.prototype,{
		init(){
			this.btns.forEach((btn,i)=>{
				btn.onclick = ()=>{
					
					if(this.index===i) return;
					this.hide();
					this.index = i;
					this.show();
				}
				this.hide(i);
			})
			this.show();
		},
		
		hide(i=this.index){
			this.btns[i].className = null;
			this.divs[i].style.display = "none";
		},
		show(){
			this.btns[this.index].className = "active";
			this.divs[this.index].style.display = "block";
		}
	})
	
	new Tag();
	
</script>
</html>